<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
    <el-form-item label="学生姓名：" prop="name">
      <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="学生年龄：" prop="age">
      <el-input v-model.number="ruleForm.age" type="text"></el-input>
    </el-form-item>
    <el-form-item label="学生班级：" prop>
      <el-select v-model="ruleForm.classesId">
        <el-option v-for="item in classesData" :key="item._id" :label="item.name" :value="item._id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="学生性别：" prop="gender">
      <el-radio v-model="ruleForm.gender" label="男">男</el-radio>
      <el-radio v-model="ruleForm.gender" label="女">女</el-radio>
    </el-form-item>

    <el-form-item label="学生图片：" prop="imagePath">
      <!-- <input  type="file" @change="uploadImage"> -->
      <el-upload
        action="/students/uploadImages"
        list-type="picture-card"
        :auto-upload="true"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
        :data="ruleForm"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="addStudents(ruleForm)">新增</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Message } from "element-ui";
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("students");

export default {
  created() {
    this.getClassesData();
  },
  data() {
    return {
      ruleForm: {
        name: "",
        age: "",
        gender: "",
        classesId: "",
        imagePath: ""
      },
      dialogImageUrl: "",
      dialogVisible: false,
      file: {}
    };
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      this.ruleForm.imagePath = response.filename[0];
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      // console.log(file);
    },
    // 新增学生
    async addStudents(student) {
      console.log(student)
      if (
        student.name != "" &&
        student.age != "" &&
        student.gender != "" &&
        student.classesId != ""
      ) {
        const data = await this.addStudentsAsync(student);
        console.log(data);
        if(data){
          this.$router.push('/system/studentsList')
        }
      } else {
        this.$message({
          message: "请填写完整的信息！",
          type: "error",
          showClose: true
        });
      }
    },
    ...mapActions(["getClassesData", "addStudentsAsync"]),
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    ...mapState(["classesData", , "addSuccess"])
  }
};
</script>

<style>
.demo-ruleForm {
  /* background-color: thistle; */
  width: 500px;
}
.el-form-item {
  padding: 0 !important;
}
.el-form-item__label {
  text-align: center;
}
.el-form-item__content {
  display: flex;
  justify-content: space-between;
}
.el-select {
  width: 100%;
}
</style>